<template>
  <div class="menu">
    <el-menu default-active="2" class="el-menu-vertical-demo" router>
      <el-menu-item index="/TraceabilityView/Commodity" class="item">
        <el-icon class="icon"><Goods /></el-icon>
        <span>商品管理</span>
      </el-menu-item>
      <el-menu-item index="/TraceabilityView/Batch" class="item">
        <el-icon class="icon"><DocumentChecked /></el-icon>
        <span>批次管理</span>
      </el-menu-item>
      <el-menu-item index="/TraceabilityView/Label/" class="item">
        <el-icon class="icon"><PriceTag /></el-icon>
        <span>标签管理</span>
      </el-menu-item>
    </el-menu>
  </div>
  <div class="routeview">
    <router-view></router-view>
  </div>
</template>

<script setup>
import { PriceTag, DocumentChecked, Goods } from '@element-plus/icons-vue'
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.menu {
  width: 15%;
  float: left;
  box-shadow: 0 0 0.1852rem rgba(0, 0, 0, 0.2);
  height: 90vh;
  margin: 0 0 0 0;
}
.routeview {
  width: 85%;
  float: left;
  height: 90vh;
}
.item {
  padding: 0.6rem;
  text-align: center;
}
.icon {
  margin-left: 0.4rem;
}
</style>
